<template>
  <div>
    <!-- 我是入库审核页面 -->
    <div class="buju">
         <div class="caidanming"><strong>药品进销存 /</strong>入库审核</div>
      <div class="title">入库审核</div>
      <!-- 搜索框 -->
      <div class="section1-1">
        <i class="el-icon-search"></i>
        <input type="text" placeholder="输入采购单号/药品名称" class="input1" />
      </div>

      <div class="nei1">
        <!-- 选择器 -->
        <!-- 审核状态 -->
        <div class="xuanze">
          <el-select v-model="value" placeholder="审核状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <!-- 供应商 -->
          <el-select v-model="value2" placeholder="供应商">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <!-- 日期选择器 -->
        <div class="wai-block">
          <div class="block1">
            <span class="time-wen">采购日期:</span>
            <el-date-picker v-model="value11" type="date" placeholder="选择日期"></el-date-picker>
          </div>&nbsp;-
          <div class="block2">
            <el-date-picker
              v-model="value22"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </div>
        </div>
         <button class="btn">查询</button>
      </div>
      <!-- 表格 -->
      <!-- 表格 -->
    <div class="section2">
      <el-table
        ref="multipleTable"
        :data="newList"
        tooltip-effect="dark"
        style=" font-size:13px"
        @selection-change="handleSelectionChange"
        :row-style="{height:'60px'}"
        :header-cell-style="{color:'',borderBottom:'2px solid #39b9ae'}"
      >
        <!-- 勾选框 -->
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="address" label="序号" width="100"></el-table-column>
        <el-table-column prop="name" label="采购编号" width="150"></el-table-column>
        <el-table-column prop="name" label="药品名称" width="155"></el-table-column>
        <el-table-column prop="name" label="药品分类" width="155"></el-table-column>
        <el-table-column prop="name" label="生产厂家" width="155"></el-table-column>
        <el-table-column prop="name" label="药品规格" width="155"></el-table-column>
        <el-table-column prop="name" label="库存数量" width="155"></el-table-column>
        <el-table-column prop="name" label="有效期" width="155"></el-table-column>  
      </el-table>
    </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //   审核状态
      options: [
        {
          value: '选项1',
          label: '阿莫西林',
        },
        {
          value: '选项2',
          label: '苯海拉明注射液',
        },
        {
          value: '选项3',
          label: '氯雷他定片',
        },
        {
          value: '选项4',
          label: '999感冒颗粒',
        },
        {
          value: '选项5',
          label: '鼻炎片',
        },
      ],
      value: '',
// 供应商
       options2: [
        {
          value: '选项1',
          label: '阿莫西林2',
        },
        {
          value: '选项2',
          label: '苯海拉明注射液2',
        },
        {
          value: '选项3',
          label: '氯雷他定片2',
        },
        {
          value: '选项4',
          label: '999感冒颗粒2',
        },
        {
          value: '选项5',
          label: '鼻炎片2',
        },
      ],
      value2: '',
      // 日期选择器
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            },
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            },
          },
        ],
      },
      value11: '',
      value22: '',
// 表格
pageNum: 6,
      nowPage: 0,
      drugList: [],
      newList: [],
       multipleSelection: [],
      currentPage: 1,
    };
  },
   computed: {},
  methods:{
        getPage(page) {
      this.newList = this.drugList.slice(
        this.pageNum * (page - 1),
        this.pageNum * page
      );
      console.log(page);
    },
        handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      console.log(val);
      this.getPage(val);
    },
  }
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
/* 搜索框 */
.section1-1 {
  border-bottom: 1px solid gainsboro;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
}
.input1 {
  width: 200px;
  height: 40px;
  border: none;
  margin-left: 10px;
  font-size: 17px;
}
input:focus {
  border: none;
  outline: none;
}
.nei1 {
  /* border: 1px solid yellow; */
  margin: 10px 0px 0px 0px;
   position: relative;
  top: 10px;
  right: 10px;
}
/* 日期选择器 */
.wai-block {
  display: inline-block;
  margin: 0px 10px;
}
.block1 {
  display: inline-block;
}
.block2 {
  display: inline-block;
}
.block1 >>> .el-input__inner {
  width: 140px !important;
}
.block1 >>> .el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
  width: 140px;
}
.block2 >>> .el-input__inner {
  width: 140px !important;
}
.block2 >>> .el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
  width: 140px;
}
.xuanze {
  display: inline-block;
}
.xuanze >>> .el-input__inner {
  width: 170px;
  margin: 0px 10px;
}
.xuanze >>>.el-select__caret.el-input__icon.el-icon-arrow-up{
  margin: 10px;
  line-height: 60px;
}
.time-wen {
  font-size: 16px;
}
.btn {
  width: 90px;
  height: 40px;
  border: 1px solid #39b9ae;
  color: #39b9ae;
  /* font-size: 15px; */
  margin-left: 20px;
  background-color: #ffffff;
  outline: none;
  position: relative;
  top: 0px;
  right: 10px;
}
/* 表格 */
.section2 {
  /* border:1px solid blue; */
  position: relative;
  top:25px;
  left: 0px;
}
/* 外边距的顺序: 上 左 下 右 */
.caidanming {
  margin: 10px 0px 10px 10px;
}
.title {
  font-size: 30px;
  margin-top: 20px;
  font-weight: bold;
  margin: 20px 50px 25px 10px;
}
</style>